<template>
	<view class="footer-c">
		<view class="c-t">
			<span>{{discountText}}</span>
		</view>
		<view class="c-m">
			<view class="l">
				<!-- 总价 -->
				<span class="price" v-if="totalPrice > 0 || productCount > 0">￥<span>{{totalPrice}}</span></span>
				<view class="m-l">
					<!-- 起送价 -->
					<span class="l-l">{{shopping_cart.shipping_fee_cart_tip}}</span>
					<view class="l-m"></view>
					<span class="l-r">支持自取</span>
				</view>
			</view>
			<view class="m-r" :style="{'background-color': btnTitle === '去结算' ? '#F0D179' : '#2F2F2F'}" @click="orderClick">
				<span :style="{color: btnTitle === '去结算' ? '#333' : '#666'}">{{btnTitle}}</span>
				<!-- <span :style="{color: btnTitle === '去结算' ? '#333' : '#666'}">{{menuData.poi_info.min_price_tip}}</span> -->
			</view>
		</view>
		<!-- 购物车所选商品数量 -->
		<view class="cart-c">
			<img mode='widthFix' :src="productCount > 0 ? '/static/detail_cart_selected.svg' : '/static/detail_cart_empty.svg'">
			<span v-if="productCount > 0">{{productCount}}</span>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	// 引入
	import Pubsub from 'pubsub-js'
	export default {
		name: 'Footer',
		props: ['support_pay', 'reduceTip'],
		data() {
			return {
				productCount: 0, // 购买数量
				totalPrice: 0, //总价
			}
		},
		computed: {
			...mapState({
				menuData: state => state.shopInfo.menuData,
				shopInfo: state => state.shopInfo.shopInfo
			}),
			shopping_cart() {
				return this.menuData.shopping_cart
			},
			// 满减提示
			discountText() {
				let text = ''
				// 提取数字规则 并颠倒 大到小
				const rule = this.reduceTip && this.reduceTip.match(/\d+/g)
				if (!rule) return
				const edgeNumList = rule.filter((item, index) => index % 2 === 0 ? true: false)
				const cutNumList = rule.filter((item, index) => index % 2 === 1 ? true: false)
				
				if (!this.menuData.poi_info) return
				// 解构起送价格
				const {min_price} = this.menuData.poi_info
				// 大于起送价格 小于满减第一档
				if (this.totalPrice >= min_price && this.totalPrice < edgeNumList[0]) {
					return `再买${(edgeNumList[0] - this.totalPrice).toFixed(1)}元，可减${cutNumList[0]}[去凑单]`
					// 小于起送价格
				} else if (this.totalPrice < min_price) {
					return `还差${(min_price - this.totalPrice).toFixed(1)}元，就能起送`
				}
				edgeNumList.forEach((item, index) => {
					if (this.totalPrice >= +item) {
						// 满足满减
						if (index === edgeNumList.length - 1) {
							// 满足最高档
							text = `已满${+item}减${cutNumList[index]}`  
						} else {
							text = `已减${cutNumList[index]}, 再买${(edgeNumList[index + 1] - this.totalPrice).toFixed(1)}元，可减${cutNumList[index + 1]}[去凑单]`
						}
						// 总价格重新计算 此行代码有问题
						// this.totalPrice = (this.totalPrice - cutNumList[index]).toFixed(1)
					} 
				})
				return text
			},
			// 最终价格
			finalPrice() {
				
				
			},
			// 购物车按钮显示的文本
			btnTitle() {
				if (!this.menuData.poi_info) return 
				const {min_price, min_price_tip} = this.menuData.poi_info
				if (!this.productCount) {
					return min_price_tip
				} else {
					return (this.totalPrice >= min_price)? '去结算': `还差${(min_price - this.totalPrice).toFixed(1)}元`
				}
			}
		},
		// 组件挂载完成
		mounted() {
			// 更新购买数量 订阅
			Pubsub.subscribe('changeCount', (name, val) => {
				this.productCount += val.count
				this.totalPrice = val.price
			})
		},
		// 组件卸载前
		beforeDestroy() {
			Pubsub.unsubscribe('changeCount')
		}
	}
</script>

<style lang="scss" scoped>
.footer-c {
	display: flex;
	flex-direction: column;
	position: fixed;
	bottom: 0;
	height: 200rpx;
	background-color: #333;
	z-index: 990;
	width: 100%;
	.c-t {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50rpx;
		background-color: #FFEFD2;
		span {
			font-size: 20rpx;
			color: $textBlack-color;
		}
	}
	.c-m {
		display: flex;
		justify-content: center;
		height: 88rpx;
		margin-left: 140rpx;
		.l {
			display: flex;
			flex-direction: column;
			flex: 1;
			justify-content: space-around;
			.price {
				font-size: 24rpx;
				color: white;
				span {
					font-size: 40rpx;
					color: white;
				}
			}
			.m-l {
				display: flex;
				align-items: center;
				.l-l {
					font-size: 24rpx;
					color: $textDarkGray-color;
				}
				.l-m {
					width: 2rpx;
					height: 20rpx;
					background-color: $textDarkGray-color;
					margin: 0 20rpx;
				}
				.l-r {
					font-size: 24rpx;
					color: $textDarkGray-color;
				}
			}
		}
		.m-r {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 88rpx;
			background-color: #2F2F2F;
			span {
				font-size: 32rpx;
				color: $textDarkGray-color;
				font-weight: bold;
			}
		}
	}
	.cart-c {
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		z-index: 991;
		img {
			width: 100rpx;
			height: 100rpx;
			background-size: cover;
		}
		span {
			position: absolute;
			right: 0;
			top: 20rpx;
			background-color: $mtRed-color;
			width: 30rpx;
			height: 30rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 20rpx;
		}
	}
}
	
</style>